import { useEffect, useState } from 'react';
import pages from '../../atoms/pages';

/**
 * 
 * @param type 发起1 参与2 关注3 
 * @returns 
 */
export default function Avtivity({
	aid,
	type,
	no,
	theme,
	time,
}: {
	aid: string;
	type: string;
	no: number;
	theme: string;
	time: number
}) {
	return <>
		<div className='v' onClick={() => {
			window.location.href = `${pages['/myactivity-raiser']}?aid=${aid}&type=${type}`;
		}}>
			<div className='left'>
				<span className='num'>{no}</span>
			</div>
			<div className='center'>
				<span className='theme'>{theme}</span>
				<span className='time'>{DateConvert(time)}</span>
			</div>
			<div className='right'>
				<img className='img' src='/images/right.png' />
			</div>
			<style jsx>{`
.v{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height:4rem;
border-color: #000000;
border-style: solid;
border-width: 0.0625rem;
 border-radius: 0.625rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.left{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 0;
background-color: #000000;
width: 1.5625rem;
 height: 1.5625rem;
 border-radius: 3.125rem;
margin-left: 1rem;
}
.num{
color: #FFFFFF;
font-size: 1rem;
}
.center{
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
margin-left: 1rem;
}
.theme{
text-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
 font-size: 0.875rem;
 color: #505D68;
}
.time{
text-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
 font-size: 0.875rem;
 color: #000000;
}
.right{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 0;
margin-right: 0.5rem;
}
.img{
height: 0.875rem;
 width: 0.5rem;
}
`}</style>
		</div>
	</>;
}


function DateConvert(date: number) {
	const d = new Date(Number(date));
	return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getHours()}日${d.getDate()} :${d.getMinutes()}`;
}
